<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态数据瀑布流</title>
    <style>
		.out{
			position: relative;;
			margin: 0 auto;
		}
		.in{
			float: left;
		}
		img{
			margin: 10px;
			padding: 10px;
			border: 3px solid lightgray;
			border-radius: 15px;
			box-shadow: 0px 0px 5px orange;
		}
    </style>
<body>

<div class="out"></div>

</body>
<script src="ajaxEncapsulation.js"></script>
<script>

	window.frankAjax({
		type:'get',
		url:'waterfall.php',
		// dataType:'json',
		success:function(res){
			var dataArr = res.info;

			//当数据请求完毕后，开始处理页面
			var outDiv = document.querySelector('.out');
			//当数据准备完毕后，先将数据加载到页面中
			for(var i = 0;i<dataArr.length;i++){
				var div = document.createElement('div');
				div.className = 'in';
				div.innerHTML = '<img src="'+dataArr[i]+'">';
				outDiv.appendChild(div);
			}

			//准备构建瀑布流的必要信息
			//当页面图片加载完成后，
				var inDivs = document.querySelectorAll('.in');
				var num = Math.floor(document.documentElement.clientWidth/inDivs[0].offsetWidth);

				outDiv.style.width = num*inDivs[0].offsetWidth+'px';
				var heightArr = [];//存放第一行图片的高度

				//构建瀑布流
				//所有的div中除了第一行的，都要定位
				for(var i=0;i<inDivs.length;i++){
					if(i<num){
						//第一行
						heightArr.push(inDivs[i].offsetHeight);
					}else{
						//其余所有行数
						inDivs[i].style.position = 'absolute';
						minHeight = Math.min.apply(null,heightArr);
						minIndex = heightArr.indexOf(minHeight);
						//开启定位
						inDivs[i].style.top = minHeight+'px';
						inDivs[i].style.left = inDivs[minIndex].offsetLeft+'px';
						//将高度数组中高度累加
						heightArr[minIndex] += inDivs[i].offsetHeight;
					}
				}		
		}
	});




	//这个数组模拟ajax请求来的后台数据
	// var dataArr = ['img/1.jpg','img/zz.jpg','img/1.jpg','img/zz.jpg','img/1.jpg','img/zz.jpg','img/1.jpg','img/zz.jpg','img/1.jpg','img/zz.jpg'];
	// //准备页面元素
	// var outDiv = document.querySelector('.out');

	// //当数据准备完毕后，先将数据加载到页面中
	// for(var i = 0;i<dataArr.length;i++){
	// 	var div = document.createElement('div');
	// 	div.className = 'in';
	// 	div.innerHTML = '<img src="'+dataArr[i]+'">';
	// 	outDiv.appendChild(div);
	// }

	// //当页面图片加载完成后，
	// window.onload = function(){
	// 	var inDivs = document.querySelectorAll('.in');
	// 	var num = Math.floor(document.documentElement.clientWidth/inDivs[0].offsetWidth);

	// 	outDiv.style.width = num*inDivs[0].offsetWidth+'px';
	// 	var heightArr = [];//存放第一行图片的高度

	// 	//所有的div中除了第一行的，都要定位
	// 	for(var i=0;i<inDivs.length;i++){
	// 		if(i<num){
	// 			//第一行
	// 			heightArr.push(inDivs[i].offsetHeight);
	// 		}else{
	// 			//其余所有行数
	// 			inDivs[i].style.position = 'absolute';
	// 			minHeight = Math.min.apply(null,heightArr);
	// 			minIndex = heightArr.indexOf(minHeight);
	// 			//开启定位
	// 			inDivs[i].style.top = minHeight+'px';
	// 			inDivs[i].style.left = inDivs[minIndex].offsetLeft+'px';
	// 			//将高度数组中高度累加
	// 			heightArr[minIndex] += inDivs[i].offsetHeight;
	// 		}
	// 	}
	// };




</script>
</html>


<!-- css，html瀑布流 -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .waterfall {
            width: 80%;
            column-gap:10px;
            column-count: 4;
            position: relative;
            margin: 0 auto;
        }
        .item {
            padding: 10px;
            margin-bottom: 10px;
            break-inside: avoid;
            border: 1px solid #000;
        }
        img {
            width: 100%;
        }
        p {
            line-height: 30px;
        }
        @media (min-width: 992px) and (max-width: 1300px) {
            .waterfall {
                column-count: 3;
            }
            p {
                color:red;																					
            }
        }
        @media (min-width: 768px) and (max-width: 991px) {
            .waterfall {
                column-count: 2;
            }
            p {
                color: orange;
            }
        }
        @media (max-width: 767px) {
            .waterfall {
                column-count: 1;
            }
        }
    </style>
</head>
<body>
    <div class="waterfall">
        <div class="item">
            <img src="1.jpg" alt="" />
            <p>夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚</p>
        </div>
        <div class="item">
            <img src="2.jpg" alt="" />
            <p>秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事秦淮事秦淮河的故事</p>
        </div>
        <div class="item">
            <img src="3.jpg" alt="" />
            <p>集贤亭的风光集贤亭的风光集贤亭的风光集贤亭的风光集贤亭的风光集贤亭的风光集贤亭的风光集贤亭的风光集贤亭的风光</p>
        </div>
        <div class="item">
            <img src="4.jpg" alt="" />
            <p>茅家铺的清新茅家铺的清新茅家铺的清新</p>
        </div>
        <div class="item">
            <img src="5.jpg" alt="" />
            <p>美丽洲的神秘</p>
        </div>
        <div class="item">
            <img src="6.jpg" alt="" />
            <p>曲院风荷的优雅曲院风荷的优雅曲院风荷的优雅</p>
        </div>
        <div class="item">
            <img src="1.jpg" alt="" />
            <p>夫子庙的夜晚</p>
        </div>
        <div class="item">
            <img src="2.jpg" alt="" />
            <p>秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事</p>
        </div>
        <div class="item">
            <img src="3.jpg" alt="" />
            <p>集贤亭的风光</p>
        </div>
        <div class="item">
            <img src="4.jpg" alt="" />
            <p>茅家铺的清新茅家铺的清新茅家铺的清新</p>
        </div>
        <div class="item">
            <img src="5.jpg" alt="" />
            <p>美丽洲的神秘</p>
        </div>
        <div class="item">
            <img src="6.jpg" alt="" />
            <p>曲院风荷的优雅曲院风荷的优雅曲院风荷的优雅</p>
        </div>
    </div>
</body>
</html> -->
